import React, { Component } from 'react';
import {
  View, StyleSheet, Dimensions,
} from 'react-native';
import { Text } from 'native-base';
import { commonMethods } from '../../utils';

const deviceWidth = Dimensions.get('window').width;
class LineItem extends Component {
  /**
   * @param props {Object}
   * @param props.label {String} 左侧展示的label
   * @param props.value {String} 右侧展示的值
  */
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {

  }

  render() {
    let rightHtml;
    if (!commonMethods.isEmpty(this.props.item.value)) {
      rightHtml = (
        <Text style={styles.rightFontStyle}>
          {this.props.item.value || '-'}
        </Text>
      );
    } else if (!commonMethods.isEmpty(this.props.children)) {
      rightHtml = (
        <View>
          {this.props.children}
        </View>
      );
    }
    return (
      <View style={styles.lineItemContent}>
        <View style={styles.itemLeft}>
          <Text style={styles.leftFontStyle}>{this.props.item.label}</Text>
        </View>
        <View style={styles.itemRight}>
          {rightHtml || (
            <Text style={styles.rightFontStyle}>-</Text>
          )}
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  lineItemContent: { // 保证子元素在同一行
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'nowrap',
    alignItems: 'center',
    paddingTop: 5,
    paddingBottom: 5,
  },
  itemLeft: {
    flex: 1,
  },
  leftFontStyle: {
    color: '#ffffff',
  },
  itemRight: {
    flex: 3,
    paddingRight: 8,
  },
  rightFontStyle: {
    color: '#dbdbdb',
  },
});

export default LineItem;
